<script setup>
import { ref, reactive, onMounted, watch, h } from 'vue';
import { api } from '@T2/plugins/env-config.ts';

const { config } = defineProps({
  config: {
    type: Object,
    required: true,
  }
});

const Rt = reactive({
  filelist: (config.value || []).map(i => { return { url: api + i.url }}),
  previewUrl: '',
  previewVisible: false,
})

const handlePreview = (file) => {
  Rt.previewUrl = file.url || file.rawUrl;
  Rt.previewVisible = true;
}
</script>

<template>
  <div class="box">
    <el-upload
      class="upload-demo"
      :style="{
        '--ul-gap': `10px`,
        '--li-width': `100px`,
        '--li-height': `100px`
      }"
      v-model:file-list="Rt.filelist"
      multiple
      disabled
      accept="image/*"
      list-type="picture-card"
      :on-preview="handlePreview"
    />
    
    <el-dialog v-model="Rt.previewVisible" width="700px">
      <img w-full :src="Rt.previewUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: block;
  width: 100%;
  .plus-name {
    color: #0079FE;
    transform: translateY(10px);
  }
}
</style>
<style scoped>
:deep(.upload-demo .el-upload-list--picture-card) {
  display: flex;
}
:deep(.upload-demo ul) {
  gap: var(--ul-gap);
}
:deep(.upload-demo li) {
  margin: 0;
  width: var(--li-width);
  height: var(--li-height);
}
:deep(.el-upload.el-upload--picture-card) {
  display: none;
  width: var(--li-width);
  height: var(--li-height);
}
:deep(.el-upload-list__item-status-label) {
  display: none !important;
}

:deep(.el-dialog .el-dialog__body) {
  display: flex;
  min-width: 400px;
  height: fit-content;
  min-height: 250px;
  justify-content: center;
  align-items: center;
}
:deep(.el-dialog .el-dialog__body img) {
  max-width: 100%;
  max-height: 100%;
}
</style>